<template>
  <div class="info">
    <van-nav-bar title="我的资料" @click-left="goBack">
      <template #left>
        <i
          class="iconfont iconfont iconbtn_nav_back myicon"
          @click="goBack"
        ></i>
      </template>
    </van-nav-bar>
    <div class="infoList">
      <van-cell-group>
        <van-cell
          title="头像"
          is-link
          value="内容"
          class="icon"
          @click="$router.push('./upload')"
        >
          <template #default>
            <img class="myimg" :src="userInfo.avatar" alt="" />
          </template>
        </van-cell>
        <van-cell
          title="昵称"
          is-link
          :value="userInfo.nickname"
          @click="$router.push('./editInfo?prototype=nickname')"
        />
        <van-cell
          title="性别"
          is-link
          :value="genderObj[userInfo.gender]"
          @click="genderShow = true"
        />
        <van-cell
          title="地区"
          is-link
          :value="areaList.city_list[userInfo.area]"
          @click="areaShow = true"
        />
        <van-cell
          title="个人简介"
          is-link
          :value="userInfo.intro"
          @click="$router.push('./editInfo?prototype=intro')"
        />
      </van-cell-group>
    </div>
    <div class="btn">
      <van-button class="_btn" plain type="danger" size="large" @click="logout"
        >退出登录</van-button
      >
    </div>
    <van-popup
      v-model="genderShow"
      position="bottom"
      :style="{ height: '40%' }"
      :close-on-click-overlay="false"
    >
      <van-picker
        title="性别"
        show-toolbar
        :columns="['未知', '男孩子', '女孩子']"
        :default-index="userInfo.gender"
        @confirm="genderConfirm"
        @cancel="genderCancel"
      />
    </van-popup>
    <van-popup
      v-model="areaShow"
      position="bottom"
      :style="{ height: '40%' }"
      :close-on-click-overlay="false"
    >
      <van-area
        title="地区"
        :area-list="areaList"
        :columns-num="2"
        @confirm="areaConfirm"
        @cancel="areaShow = false"
        :value="userInfo.area"
      />
    </van-popup>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { apiEditUserInfo } from '@/api/login'
import { removeLocal } from '@/utils/local'
import areaList from '@/utils/area'
export default {
  created () {
    console.log(this.userInfo)
  },
  data () {
    return {
      // 地区数据源
      areaList: areaList,
      // 地区弹窗
      areaShow: false,
      // 性别弹窗
      genderShow: false,
      genderObj: {
        0: '未知',
        1: '男孩子',
        2: '女孩子'
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    // 回退
    goBack () {
      this.$router.push('/my')
    },
    // 退出登录
    logout () {
      this.$dialog
        .confirm({
          title: '标题',
          message: '您确定要退出登录吗'
        })
        .then(() => {
          removeLocal('token')
          this.$store.commit('setUserInfo', '')
          this.$router.push('/login')
          this.$toast.success('成功退出')
        })
        .catch(() => {
          // on cancel
        })
    },
    //   性别退出弹框
    genderCancel () {
      this.genderShow = false
    },
    // 编辑性别
    async genderConfirm (value, index) {
      this.genderShow = false
      this.$toast.loading({
        duration: 0
      })
      const res = await apiEditUserInfo({ gender: index })
      console.log(res)
      this.$toast.success('更改性别成功')
      this.$store.dispatch('setUserInfo')
      //   const res1 = await apiGetUserInfo()
      //   //   console.log(res1)
      //   res1.data.avatar = 'http://localhost:1337' + res1.data.avatar
      //   this.$store.commit('setUserInfo', res1.data)
    },
    // 编辑城市
    async areaConfirm (data, data1) {
      console.log(data, data1)
      this.areaShow = false
      this.$toast.loading({
        duration: 0
      })
      const res = await apiEditUserInfo({ area: data[1].code })
      console.log(res)
      this.$toast.success('更改城市成功')
      this.$store.dispatch('setUserInfo')
      //   const res1 = await apiGetUserInfo()
      //   this.res1.data.avatar = 'http://localhost:1337' + this.res1.data.avatar
      //   this.$store.commit('setUserInfo', res1.data)
      //   console.log(res1)
    }
  }
}
</script>
<style lang="less">
.info {
  /deep/.van-nav-bar__left {
    padding: 0;
  }
  .icon {
    line-height: 57px;
  }
  .myicon {
    font-size: 50px;
  }
  .myimg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: center;
  }
  .infoList {
    padding: 15px;
  }
  .btn {
    color: red;
  }
  /deep/.van-button--plain {
    border: 1px solid #fff;
  }
}
</style>
